<template>
  <div class="task-page">
    <div class="task-top">
      <div class="task-top-city" @click="state.citySwitchBool = true">
        <i></i>
        <strong>{{ store.cityValue }}</strong>
        <span></span>
      </div>
      <input type="text" readonly placeholder="请输入想要搜索的内容">
      <router-link to="/message/systemList" class="task-icon-message"></router-link>
    </div>
    <Banner></Banner>
    <div class="task-title">
      <h3>最新任务</h3>
      <div class="task-position-pop" @click="state.positionTypeBool = true">{{state.positionValue??'职位类型'}}<span></span></div>
      <div class="task-screen-pop">筛选<span></span></div>
    </div>
    <TaskList :task-list="taskList"></TaskList>
    <!-- 切换城市弹窗 -->
    <van-popup v-model:show="state.citySwitchBool" position="top" duration="0" :style="{ width: '100%', height: '100%' }">
      <CitySwitch></CitySwitch>
    </van-popup>
    <!-- 切换类型弹窗 -->
    <van-popup v-model:show="state.positionTypeBool" position="top" duration="0" :style="{ width: '100%', height: '100%' }">
      <PositionType></PositionType>
    </van-popup>
    <FooterTabbar></FooterTabbar>
  </div>
</template>
<script setup lang="ts">
import {reactive, provide} from "vue";
import FooterTabbar from "@/components/FooterTabbar.vue";
import TaskList from "@/components/list/TaskList.vue";
import Banner from "@/views/task/components/Banner.vue";
import CitySwitch from "@/views/task/components/CitySwitch.vue";
import PositionType from "@/views/task/components/PositionType.vue";
import {taskStore} from '@/store/task.ts'
const store = taskStore()

const taskList = reactive([
  {id: 1},
  {id: 2}
])
const state = reactive({
  citySwitchBool: false,
  positionTypeBool: false,
  positionValue: ''
})
// 关闭城市窗口
const closeCitySwitch = (name: string) => {
  if (name) {
    store.setCityValue(name)
  }
  state.citySwitchBool = false
}
// 关闭职位类型窗口
const closePositionType = (name: string) => {
  if (name) {
    state.positionValue = name
  }
  state.positionTypeBool = false
}
provide('popup', {
  closeCitySwitch,
  closePositionType,
})
</script>
<style scoped>
.task-page {
  padding: 0 0.59rem 3rem;
  min-height: calc(100vh - 3rem);
  background: #F9F9F9;
}

.task-top {
  display: flex;
  align-items: center;
  padding: 0.5rem 0 0.91rem;
}

.task-top-city {
  display: flex;
  align-items: center;
}

.task-top-city i {
  width: 1.04rem;
  height: 1.01rem;
  background: url("@/assets/img/icon/icon-place.png");
  background-size: 100%;
}

.task-top-city strong {
  margin-left: 0.1rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: #333;
}

.task-top-city span {
  display: flex;
  margin: 0 0.6rem 0 0.2rem;
  border-left: 0.18rem solid transparent;
  border-right: 0.18rem solid transparent;
  border-top: 0.36rem solid #333;
}

.task-top input {
  flex: 1;
  padding-left: 1.7rem;
  height: 1.71rem;
  background: #FFFFFF url("@/assets/img/icon/icon-search.png") 0.35rem 0.3rem no-repeat;
  background-size: 8%;
  border: 0.03rem solid #EDEDED;
  border-radius: 0.85rem;
  font-size: 0.69rem;
  font-weight: 300;
  color: #999;
}

.task-icon-message {
  width: 1.31rem;
  height: 1.28rem;
  background: url("@/assets/img/icon/icon-remind.png") no-repeat;
  background-size: 100%;
  margin-left: 0.27rem;
}

.task-title {
  display: flex;
  align-items: center;
  margin-bottom: 0.67rem;
  margin-top: 1.44rem;
}

.task-title h3 {
  flex: 1;
  font-size: 0.96rem;
  line-height: 0.96rem;
  font-weight: bold;
  color: #333;
}

.task-position-pop, .task-screen-pop {
  font-size: 0.75rem;
  line-height: 0.75rem;
  font-weight: 300;
  color: #666;
  margin-left: 0.56rem;
}

.task-position-pop span, .task-screen-pop span {
  display: inline-block;
  margin-left: 0.25rem;
  border-left: 0.18rem solid transparent;
  border-right: 0.18rem solid transparent;
  border-top: 0.36rem solid #333;
}
</style>